<template>
  <el-drawer
  title="资源库同步记录"
  :visible.sync="drawerVisible"
  direction="rtl"
  size="70%"
  :before-close="closeWindow">
  <PageCard>
     <!-- 表格 -->
     <TablePage ref="databaseSyncDrawerTable" :customTableHeight="255" :loading.sync="loading" :table-data="databaseSyncTableDatas" :columns="columns" :pagination="pagination" @reloadData="loadTableData"/>
  </PageCard>
  </el-drawer>
</template>
<script>
import PageCard from '@/components/PageCard/index.vue'
import TablePage from '@/components/TablePage/index.vue'

import { databaseSyncPage } from '@/api/database-sync'

export default {
  name: 'DatabaseSyncDrawer',
  components: {
    PageCard,
    TablePage
  },
  props: {
    visible: {
      type: Boolean,
      default: ()=> false
    },
    databaseId: {
      type: Number,
      default: ()=> null
    }
  },
  data() {
    return {
      loading: false,
      databaseSyncTableDatas: [],
      pagination: {
        width: '80%',
        onShow: true,
        position: 'right'
      },
      columns: [{
        title: '标题',
        name: 'title',
        width: 250,
        align: 'center'
      }, {
        title: '执行信息',
        name: 'remark',
        width: 250,
        ellipsis: true,
        align: 'center'
      }, {
        title: '错误日志',
        name: 'errorLog',
        width: 250,
        ellipsis: true,
        align: 'center'
      },{
        title: '执行时间',
        name: 'createTime',
        width: 180,
        align: 'center'
      }, {
        title: '执行人',
        name: 'createName',
        width: 180,
        align: 'center'
      }, {
        title: '执行状态',
        name: 'runStatus',
        width: 150,
        align: 'center',
        iconName: 'setting',
        isRotate: true,
        iconPosition: 'right',
        select: true,
        iconShow: (row)=> {
          return row.runStatus === 1
        },
        options: this.$config.DATABASE_RUN_STATUS,
        colorIndex: 1,
        optionsColor: ['#409eff', '#67c23a', '#f56c6c']
      }]
    }
  },
  computed: {
    drawerVisible: {
      get(){
        return this.visible
      }
    }
  },
  watch: {
    databaseId: {
      handler(val) {
        if(!val) return
        this.$nextTick(()=> {
          this.loadTableData()
        })
      }
    }
  },
  methods: {
    //加载数据
    async loadTableData() {
      this.loading = true
      const {pageNumber, pageSize} = this.$refs.databaseSyncDrawerTable.page
      const res = await databaseSyncPage({pageNumber, pageSize, databaseId: this.databaseId})
      this.$refs.databaseSyncDrawerTable.page.pageNumber = res.data.pageNumber
      this.$refs.databaseSyncDrawerTable.page.pageSize = res.data.pageSize
      this.$refs.databaseSyncDrawerTable.page.total = res.data.total
      this.databaseSyncTableDatas = res.data.rows
      this.loading = false
    },
    closeWindow() {
      this.$emit('update:databaseId', null)
      this.$emit('update:visible', false)
    }
  }
}
</script>
<style lang="scss" scoped>

</style>